<template>
  <div class="app-container">
    <el-button class="margin-bottom" type="primary" size="small" @click="dialog.createUser.visible = true">新建</el-button>
    <el-table
      :data="users"
      size="mini"
      border
      stripe
      highlight-current-row
    >
      <el-table-column type="index" width="55" />
      <el-table-column
        prop="username"
        label="用户名称"
        sortable
      />
      <el-table-column
        prop="mainGroup"
        label="主组织"
      />
      <el-table-column
        prop="mainRole"
        label="主角色"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detail(scope.row.username)">详情</el-button>
          <span v-show="scope.row.username !== 'admin'" class="margin-left">
            <el-button type="text" size="small" :disabled="scope.row.username === 'admin'" @click="delUser(scope.row.username)"><span class="text-danger">删除</span></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建用户 -->
    <el-dialog :visible.sync="dialog.createUser.visible" width="30%" title="新建用户">
      <el-form :model="dialog.createUser.user" size="mini">
        <el-button class="margin-bottom" type="primary" size="small" @click="createUser">确定</el-button>

        <el-form-item>用户初始密码为: 0</el-form-item>
        <el-form-item>
          <el-input v-model="dialog.createUser.user.toolUser.username" placeholder="请输入用户名" size="small" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="dialog.createUser.user.roles" placeholder="选择角色列表" multiple style="width: 90%">
            <el-option v-for="accessRole in dialog.accessRoles" :key="accessRole.key" :value="accessRole.key" :label="accessRole.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="height: 300px;overflow-y: scroll">
            <el-tree ref="groupTree" :data="dialog.accessGroups" :check-strictly="true" node-key="path" :default-expanded-keys="['/']" :props="{label: 'path'}" show-checkbox />
          </div>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
import security from '@/api/security'

export default {
  name: 'user',
  data() {
    return {
      users: [],
      dialog: {
        createUser: {
          visible: false,
          user: {
            toolUser: { username: null },
            roles: [],
            groups: []
          }
        }
      }
    }
  },
  mounted() {
    this.loadUsers()

    // 加载登录用户可授权的角色
    security.accessRoles().then(res => {
      this.dialog.accessRoles = res.data.map(role => ({ key: role.toolRole.rolename, value: role.toolRole.rolename }))
    })

    // 加载登录用户可授权的分组
    security.accessGroups().then(res => {
      this.dialog.accessGroups = [res.data]
    })
  },
  methods: {
    loadUsers() {
      security.accessUsers().then(res => {
        this.users = res.data
      })
    },
    createUser() {
      // 获取选择的组织列表
      this.dialog.createUser.user.groups = this.$refs.groupTree.getCheckedKeys()
      security.addUser(this.dialog.createUser.user).then(res => {
        this.dialog.createUser.visible = false
        this.loadUsers()
      })
    },
    delUser(username) {
      security.delUser(username).then(res => {
        this.loadUsers()
      })
    },
    detail(username) {
      this.$router.replace({ path: '/security/user/detail', query: { username }})
    }
  }
}
</script>


